<template>
	<view class="page-view">

		<view class="top-bg">
			<u-sticky>
				<view class="return" @click="goToBack()">
					<u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
				</view>
				日常运维
				<view class="selectBox" @click="goToSelect()" v-if="terminalId">
					<view class="">选择终端：{{terminalName}}</view>
					<u-icon name="arrow-right" color="#5E5E5E " bold="true" size="28"></u-icon>
				</view>
				<view class="scrollTab">
				<scroll-view scroll-x="true" >
				<view class="checkTab">
					<view class="checkItem" @click="checkedTypeFn('0')">
					  <view :class="checkedItem !== '0' ? 'unchecked':''">
					   运维打卡
					  </view>
							<view v-if="checkedItem==='0'" class="selectedBottom"></view>
					</view>
				     <view class="checkItem" @click="checkedTypeFn('1')">
				     <view :class="checkedItem !== '1' ? 'unchecked':''">
				      农污设施
				     </view>
					 <view v-if="checkedItem==='1'" class="selectedBottom"></view>
				   </view>
				   <view class="checkItem" @click="checkedTypeFn('2')">
				     <view :class="checkedItem !== '2' ? 'unchecked':''">
				      监测设备
				     </view>
				     <view v-if="checkedItem==='2'" class="selectedBottom"></view>
				    </view>
				    <view class="checkItem" @click="checkedTypeFn('3')">
				      <view :class="checkedItem !== '3' ? 'unchecked':''">
				        图片上传
				      </view>
				      <view v-if="checkedItem==='3'" class="selectedBottom"></view>
				     </view>
					 <view class="checkItem" @click="checkedTypeFn('4')">
					   <view :class="checkedItem !== '4' ? 'unchecked':''">
					     工作内容
					   </view>
					   <view v-if="checkedItem==='4'" class="selectedBottom"></view>
					  </view>
					  <view class="checkItem" @click="checkedTypeFn('5')">
					    <view :class="checkedItem !== '5' ? 'unchecked':''">
					      水体检查
					    </view>
					    <view v-if="checkedItem==='5'" class="selectedBottom"></view>
					   </view>
					   
				 </view>
				 </scroll-view>
				 </view>
			</u-sticky>
		</view>
		<view :class="{'posBox':terminalId,'posBox2':!terminalId}"  :style="{ height: 'calc(100vh - 268rpx)' }">
			<scroll-view scroll-y="true" :class="{'scroll-Y':terminalId,'scroll-Y2':!terminalId}">
				<view class="" v-if="checkedItem==='0'">
					<view class="yunwei-date">
						<view class="itemBox">
							<view class="">开始运维</view>
							<view class="time">{{startTime}}</view>
							<view class="dkStatus" :class="{'dkStatus2':startStatus==1}">{{startStatus==1?'已打卡':'未打卡'}}</view>
						</view>
						<view class="itemBox">
							<view class="">结束运维</view>
							<view class="time">{{endTime}}</view>
							<view class="dkStatus" :class="{'dkStatus2':endStatus==1}">{{endStatus==1?'已打卡':'未打卡'}}</view>
						</view>
					</view>
					<view class="dk-operation">
						<view class="circleBox" :class="{'circleBox2':dkStatus==3}" @click="yunweiDakaFn()">
							<view class="">{{dkStatus==3?'无法打卡':dkStatus==1?'开始运维打卡':dkStatus==2?'更新结束运维打卡':''}}</view>
							<view class="nowTime">{{nowTime}}</view>
						</view>
						<view class="grey" v-if="dkStatus==3">
							<image class="img" src="../../static/icon/error.png" mode=""></image>
							未进入打卡范围
						</view>
						<view class="grey" v-else>
							<image class="img" src="../../static/icon/true.png" mode=""></image>
							已进入打卡范围
						</view>
					</view>
				</view>
				<view v-else class="form_content">
					<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
					<u--form labelWidth="atuo" labelPosition="left" :model="model1" ref="form1">
						<view class="" v-show="checkedItem==='1'">
						<view class="title">
							<view class="line-left"></view>农污设施
						</view>
						<view  v-for="(i,index) in facilityList" :key="index">
							<view class="flexBox">
							<view class="facilityName">{{i.name}}</view>
							<view class="">
								<view class="" style="display: flex;">
									<view class="wtBox" @click="radioWtFn(index,2)">
										<u-icon v-if="i.isIssue==2"  name="checkmark-circle-fill" color="#0be583" size="30"></u-icon>
										<u-icon v-else  name="checkmark-circle" size="30"></u-icon>
										<text>有问题</text>
									</view>
									<view class="wtBox" @click="radioWtFn(index,1)">
										<u-icon v-if="i.isIssue==1" name="checkmark-circle-fill" color="#0be583" size="30"></u-icon>
										<u-icon v-else name="checkmark-circle" size="30"></u-icon>
										<text>无问题</text>
									</view>
								</view>
								<view v-if="i.isIssue==2" class="" style="display: flex;">
									<view class="default" :class="i.isHandle==1?'checked':''" @click="radioClFn(index,1)">未处理</view>
									<view class="default" :class="i.isHandle==2?'checked':''" @click="radioClFn(index,2)">已处理</view>
								</view>
							</view>
							</view>
							<u-form-item v-if="i.isHandle==1" label="问题描述" prop="problemDetail" borderBottom >
								<u--textarea placeholder="请输入内容" v-model="i.problemDetail" count
									height="120"></u--textarea>
							</u-form-item>
							<u-form-item v-if="i.isHandle==2" label="处理措施" prop="handleDetail" borderBottom >
								<u--textarea placeholder="请输入内容" v-model="i.handleDetail" count
									height="120"></u--textarea>
							</u-form-item>
						</view>
						
						</view>
						<view class="" v-show="checkedItem==='2'">
						<view class="title">
							<view class="line-left"></view>监测设备
						</view>
						<view class="" v-for="(i,index) in equList" :key="index">
							<view class="flexBox">
							<view class="facilityName">{{i.name}}</view>
							<view class="">
								<view class="" style="display: flex;">
									<view class="wtBox" @click="radioWtFn2(index,2)">
										<u-icon v-if="i.isIssue==2"  name="checkmark-circle-fill" color="#0be583" size="30"></u-icon>
										<u-icon v-else  name="checkmark-circle" size="30"></u-icon>
										<text>有问题</text>
									</view>
									<view class="wtBox" @click="radioWtFn2(index,1)">
										<u-icon v-if="i.isIssue==1" name="checkmark-circle-fill" color="#0be583" size="30"></u-icon>
										<u-icon v-else name="checkmark-circle" size="30"></u-icon>
										<text>无问题</text>
									</view>
								</view>
								<view v-if="i.isIssue==2" class="" style="display: flex;">
									<view class="default" :class="i.isHandle==1?'checked':''" @click="radioClFn2(index,1)">未处理</view>
									<view class="default" :class="i.isHandle==2?'checked':''" @click="radioClFn2(index,2)">已处理</view>
								</view>
							</view>
						</view>
						<u-form-item v-if="i.isHandle==1" label="问题描述" prop="problemDetail" borderBottom >
							<u--textarea placeholder="请输入内容" v-model="i.problemDetail" count
								height="120"></u--textarea>
						</u-form-item>
						<u-form-item v-if="i.isHandle==2" label="处理措施" prop="handleDetail" borderBottom >
							<u--textarea placeholder="请输入内容" v-model="i.handleDetail" count
								height="120"></u--textarea>
						</u-form-item>
						</view>
						</view>
						<view class="" v-show="checkedItem==='3'">
							<view class="warning">
								<image class="icon" src="../../static/icon/warn.png" mode=""></image>
								拍照时请拍出更多的参照物便于寻找问题点！
							</view>
							<u-form-item borderBottom label="处理图片">
								<u-upload width="220" height="220" :previewFullImage="true" :fileList="tp" name="tp"
									@afterRead="afterRead" @delete="deletePic" multiple :maxCount="8">
								</u-upload>
							</u-form-item>
							<u-form-item borderBottom label="问题图片">
								<u-upload width="220" height="220" :previewFullImage="true" :fileList="tpWt" name="tpWt"
									@afterRead="afterRead" @delete="deletePicWt" multiple :maxCount="8">
								</u-upload>
							</u-form-item>
						</view>
						<view class="" v-show="checkedItem==='5'">
						<u-form-item label="水体检查" prop="water" borderBottom >
							<u--input v-model="water" border="none" placeholder="请输入"></u--input>
						</u-form-item>
						<u-form-item label="有无问题" prop="waterIssue" borderBottom  >
							<u-radio-group v-model="waterIssue">
								<u-radio :customStyle="{marginRight: '36rpx'}" v-for="(item, index) in radiolistSt1"
									:key="index" :label="item.name" :name="item.value" size="28" labelSize="28"
									iconSize="28">
								</u-radio>
							</u-radio-group>
						</u-form-item>
						<view class="" v-if="waterIssue==2">
							<u-form-item label="问题描述" prop="waterDesc"  >
								<u--textarea placeholder="请输入内容" v-model="waterDesc" count
									height="120"></u--textarea>
							</u-form-item>
							<u-form-item label="处理状态" prop="waterHandle" borderBottom >
								<u-radio-group v-model="waterHandle">
									<u-radio :customStyle="{marginRight: '36rpx'}" v-for="(item, index) in radiolistSt2"
										:key="index" :label="item.name" :name="item.value" size="28" labelSize="28"
										iconSize="28">
									</u-radio>
								</u-radio-group>
							</u-form-item>
							<u-form-item label="处理措施" prop="waterMeasure"  v-if="waterHandle==2">
								<u--textarea placeholder="请输入内容" v-model="waterMeasure" count
									height="120"></u--textarea>
							</u-form-item>
						</view>
						
						
						</view>
						<view class="" v-show="checkedItem==='4'">
						<view class="workBox">
							<u--textarea placeholder="格栅池清掏淤泥垃圾、设备维护、修剪绿化、环境整治等工作" v-model="workDetail" count
								height="520"></u--textarea>
						</view>
							</view>
					</u--form>
					<u-button type="primary" text="提交" customStyle="margin-top: 50px" @click="submit"></u-button>
					<!-- <u-button type="error" text="重置" customStyle="margin-top: 10px" @click="reset"></u-button> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>	
<script>
import {
		getDictItemInfo
	} from '@/api/system.js';
	import {
		commonUploadPic
	} from '@/api/common.js';
	import {
		addSubmitMission,
		checkOMmission,
		queryCheckDetail
	} from '@/api/yunwei.js';
	import {
			getFacilityList,getEquipmentList
		} from '@/api/terminal.js';
	export default {
		components: {

		},
		data() {
			return {
				startStatus:'',
				endStatus:'',
				startTime:'--',
				endTime:'--',
				nowTime:'',
				dkStatus:'',
				timer:'',
				facilityList:[],
				equList:[],
				checkedItem:'0',
				terminalName: '请选择终端',
				terminalId: '',
				villageId:'',
				fileList1: [],
				disabled1: false,
				tips: '',
				value: '',
				showCalendar: false,
				showBirthday: false,
				tp: [],
				tpWt: [],
				workDetail:'',
				water: '',
				waterIssue: '1',
				waterDesc: '',
				waterHandle: '',
				waterMeasure: '',
				radiolistSt2: [{
						name: '已处理',
						value: '2',
						disabled: false
					},
					{
						name: '未处理',
						value: '1',
						disabled: false
					}
				],
				radiolistSt1: [{
						name: '有问题',
						value: '2',
						disabled: false
					},
					{
						name: '无问题',
						value: '1',
						disabled: false
					}
				],
			}
		},
		watch: {
		  terminalId: {
		    handler: function (val) {
		      if (val) {
		        this.getFacilityList()
		        this.getEquipmentList()
		      }
		    },
		    immediate: true
		  }
		},
		mounted() {
			this.timer = setInterval(() => {
			  this.getNowTime()
			},1000)
			// let that = this
			// uni.getLocation({
			//   type: 'gcj02',
			//   success: function(res) {
			//     // console.log('当前位置的经度：' + res.longitude);
			//     // console.log('当前位置的纬度：' + res.latitude);
			//     that.location = res
			//   }
			// });
		},
		// 组件销毁时关闭定时器
		beforeDestroy() {
		  clearInterval(this.timer)
		},
		created() {
			
		},
		onReady() {
			// 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则
			// this.$refs.form1.setRules(this.rules)
			
		},
		onShow() {
			this.terminalName = uni.getStorageSync('terminalName')
			this.terminalId = uni.getStorageSync('terminalId')
			this.villageId = uni.getStorageSync('villageId')
			// console.log(this.terminalId, 'this.terminalId')
			this.queryCheckDetail()
		},
		methods: {
			//获取当前时间
			      getNowTime() {
			        var date = new Date();
			        var hour = date.getHours();
			        //分 getMinutes()： (0 ~ 59)
			        var minute = date.getMinutes();
			        //秒 getSeconds()：(0 ~ 59)-
			        var second = date.getSeconds();
			        var time = this.addZero(hour) + ":" +this.addZero(minute) + ':' + this.addZero(second);
			            this.nowTime = time
							  // this.nowTime2=this.addZero(hour) + ":" +this.addZero(minute)
			        },
			        //小于10的拼接上0字符串
			        addZero(s) {
			            return s < 10 ? ('0' + s) : s;
			        },
			checkedTypeFn(type){
				if(type!=='0'&&this.startStatus!==1){
						uni.showToast({
							title: '请先打卡',
							icon: 'none',
							duration: 300
						})
				}else{
					this.checkedItem=type
				}
			  
			},
			goToBack() {
				wx.navigateBack({
				    delta: 1
				  });
			},
			goToSelect() {
				uni.navigateTo({
					url: '/subpack_YunWei/yunWeiDaka/terminalSelect'
				})
			},
			async queryCheckDetail(){
					  const terminalId=this.terminalId
					  const villageId=terminalId?'':this.villageId
					  const location = uni.getStorageSync('location')
					  const res=await queryCheckDetail({
						  // latitude:'29.157964',
						  // longitude:'119.588784',
							  latitude:location.latitude,
							  longitude:location.longitude,
						      terminalId,
							  villageId,
					  })
						  const obj=res.data.data||{}
						  this.startStatus=obj.beginCheck
						  this.endStatus=obj.endCheck
						  this.dkStatus=obj.checkType
						  if(obj.beginCheckDate){
							   const str=obj.beginCheckDate.split(' ')[1].substring(0, 5);
							  this.startTime=str
							  console.log(str);
						  } else{
						  this.startTime="--"
					  }
			},
			async checkOMmission(){
					  const terminalId=this.terminalId
					  const villageId=terminalId?'':this.villageId
					  const location = uni.getStorageSync('location')
					  const res=await checkOMmission({
						  // latitude:'29.157964',
						  // longitude:'119.588784',
						  latitude:location.latitude,
						  longitude:location.longitude,
						  terminalId,
						  villageId
					  })
					  const obj=res.data.data||{}
					  if(obj.endCheckDate){
					  				   const str=obj.endCheckDate.split(' ')[1].substring(0, 5);
					  				  this.endTime=str
					  				  console.log(str);
					  } else{
						  this.endTime="--"
					  }
					 // const str=obj.endCheckDate.split(' ')[1]
					 //  console.log(str);
						//   this.endTime=obj.endCheckDate
					  this.queryCheckDetail()
			},
			yunweiDakaFn(){
					  if(this.dkStatus==3) return
					  this.checkOMmission()
			},
			// 终端设施列表
	    async getFacilityList() {
				try {
					const {
						data
					} = await getFacilityList({
						terminalId: this.terminalId,
						pageNo: 1,
						pageSize: 100,
					});
					this.facilityList=(data?.result.records || []).map((x) => {
						return {
							id:x.id,
							name:`${x.facilityType_dictText}(${x.facilityNo})`,
							type: x.facilityType,
							isIssue:1,
							isHandle:'',
							problemDetail:'',
							handleDetail:''
							
						};
					});
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 终端设备列表
			async getEquipmentList() {
					try {
						const {
							data
						} = await getEquipmentList({
							terminalId: this.terminalId,
							pageNo: 1,
							pageSize: 100,
						});
						this.equList=(data?.result.records || []).map((x) => {
							return {
								id:x.id,
								name: x.equName,
								type: x.equType,
								isIssue:1,
								isHandle:'',
								problemDetail:'',
								handleDetail:''
							};
						});
					} catch (e) {
						//TODO handle the exception
					}
				},
			radioWtFn(i,status){
				this.facilityList[i].isIssue=status
				if(status==1){
					this.facilityList[i].isHandle=''
					this.facilityList[i].problemDetail=''
					this.facilityList[i].handleDetail=''
					
				} 
			},
			radioClFn(i,status){
				this.facilityList[i].isHandle=status
				if(status==1){
					this.facilityList[i].handleDetail=''
				}else{
					this.facilityList[i].problemDetail=''
				}
			},
			radioWtFn2(i,status){
				this.equList[i].isIssue=status
				if(status==1){
					this.equList[i].isHandle=''
					this.equList[i].problemDetail=''
					this.equList[i].handleDetail=''
				} 
			},
			radioClFn2(i,status){
				this.equList[i].isHandle=status
				if(status==1){
					this.equList[i].handleDetail=''
				}else{
					this.equList[i].problemDetail=''
				}
			},
			async addSubmitMission() {
				const res = await addSubmitMission({
					water: this.water,
					waterIssue:this.waterIssue,
					waterDesc:this.waterIssue==2?this.waterDesc:'',
					waterHandle: this.waterIssue==2?this.waterHandle:'',
					waterMeasure: this.waterIssue==2&&this.waterHandle==2?this.waterMeasure:'',
					workDetail:this.workDetail?this.workDetail:'格栅池清掏淤泥垃圾、设备维护、修剪绿化、环境整治等工作',
					terminalId: this.terminalId,
					villageId:this.villageId,
					handlePic: this.tp.map(item => item.url).join(','),
					pic:this.tpWt.map(item => item.url).join(','),
					statusDtoList:this.facilityList,
					equDtoList:this.equList
				})
				if (res.data.code == 200) {
					uni.showToast({
						title: res.message
					})
					uni.navigateTo({
						url: '/pages/home/home'
					})
				} else {
					uni.showToast({
						title: res.data.message,
						icon: 'none'
					})
				}
			},
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[event.name].length
				lists.map((item) => {
					this[event.name].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[event.name][fileListLen]
					this[event.name].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			async uploadFilePromise(url) {
				const res = await commonUploadPic(url, 1)
				console.log(res, 'uploadHttp')
				let d = JSON.parse(res.data)
				if (d.code == 200) {
					return d.result
				}
			},
			// 删除图片
			deletePic(event) {
				this.tp.splice(event.index, 1)
			},
			deletePicWt(event) {
				this.tpWt.splice(event.index, 1)
			},
			async submit() {
				this.addSubmitMission()
				// const terminalId = this.terminalId
				// const villageId=terminalId?'':this.villageId
				// const location = uni.getStorageSync('location')
				// const res = await queryCheckDetail({
				// 	latitude:location.latitude,
				// 	longitude:location.longitude,
				// 	terminalId,
				// 	villageId
				// })
				// const obj = res.data.data || {}
				// const status = obj.beginCheck
				// if (status == 1) {
				// 	this.addSubmitMission()
				// } else {
				// 	uni.showToast({
				// 		title: '请先打卡再提交',
				// 		icon: 'none',
				// 		duration: 300
				// 	})
				// 	// 延时跳转
				// 	setTimeout(() => {
				// 		uni.navigateTo({
				// 			url: '/subpack_YunWei/yunWeiDaka/index'
				// 		})
				// 	}, 300)

				// }

				// 如果有错误，会在catch中返回报错信息数组，校验通过则在then中返回true
				// this.$refs.form1.validate().then(res => {
				// 	uni.$u.toast('校验通过')

				// }).catch(errors => {
				// 	uni.$u.toast('校验失败')
				// })
			},
			reset() {
				this.model1 = {
					facilityDesc: '',
					facilityMeasure: '',
					tp: [],
					equipmentDesc: '',
					equipmentMeasure: '',
					water: '',
					waterIssue: '',
					waterDesc: '',
					waterHandle: '',
					waterMeasure: '',
				}
				this.workDetail=''
				// const validateList = ['userInfo.name', 'userInfo.sex', 'radiovalue1', 'checkboxValue1', 'intro',
				// 'hotel', 'code', 'userInfo.birthday']
				// this.$refs.form1.resetFields()
				// this.$refs.form1.clearValidate()
				// setTimeout(()=>{
				// 	this.$refs.form1.clearValidate(validateList)
				// 	// 或者使用 this.$refs.form1.clearValidate()
				// },10)
			}
		},
	}
</script>

<style lang="scss">
	.page-view {
		height: 100vh;
		position: relative;
		overflow: hidden;
		.posBox {
			position: absolute;
			top: 355rpx;
			width: 100%;
		}
        .posBox2 {
			position: absolute;
			top: 200rpx;
			width: 100%;
		}
		.scroll-Y {
			height: 93%;
		}
		.scroll-Y2 {
			height: 98%;
		}
	}
 .yunwei-date{
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
	 background: #FFFFFF;
	 border-radius: 10rpx 10rpx 10rpx 10rpx;
	 margin: 0 32rpx 16rpx 32rpx;
	 padding:32rpx;
	 .itemBox{
		 width: 275rpx;
		 background: #F5F5F5;
		 border-radius: 10rpx 10rpx 10rpx 10rpx;
		 position: relative;
		 padding: 8rpx 0 22rpx 22rpx;
		 font-weight: 800;
		 font-size: 28rpx;
		 color: #4A4A4A;
		 .dkStatus{
			 position: absolute;
			 right: 0;
			 top: 0;
			 width: 106rpx;
			 height: 52rpx;
			 line-height: 52rpx;
			 text-align: center;
			 background: #E5E5E5;
			 border-radius: 0rpx 10rpx 0rpx 10rpx;
			 font-weight: bold;
			 font-size: 24rpx;
			 color: #747474;
		 }
		 .dkStatus2{
			 background: #D5EFE7;
			 color: #74CDAF;
		 }
		 .time{
			 width: 130rpx;
			 height: 50rpx;
			 background: #FFFFFF;
			 border-radius: 26rpx 26rpx 26rpx 26rpx;
			 margin-top: 16rpx;
			 text-align: center;
			 line-height: 50rpx;
		 }
	 }
 }
 .dk-operation{
 	 height: 750rpx;
 	 margin: 0 32rpx;
 	 background: #FFFFFF;
 	 border-radius: 10rpx 10rpx 10rpx 10rpx;
 	 padding-top: 234rpx;
 	 display: flex;
 	 flex-direction: column;
 	 align-items: center;
 	 // justify-content: center;
 	 .circleBox{
 		 width: 336rpx;
 		 height: 336rpx;
 		 background: #3C8AFF;
 		 border-radius: 50%;
 		 text-align: center;
 		 font-weight: bold;
 		 font-size: 36rpx;
 		 color: #FFFFFF;
 		 display: flex;
 		 flex-direction: column;
 		 justify-content: center;
 		 margin-bottom: 32rpx;
 		 .nowTime{
 			  font-size: 32rpx;
 			  margin-top: 18rpx;
 		 }
 	 }
 	 .circleBox2{
 		 background: #C5C5C5;
 	 }
 	 .grey{
 		 font-weight: 400;
 		 font-size: 28rpx;
 		 color: #747474;
 		 .img{
 			 width: 28rpx;
 			 height: 28rpx;
 			 vertical-align: middle;
 			 margin-right: 10rpx;
 		 }
 	 }
 }
	.top-bg {
		width: 100%;
		height: 335rpx;
		background: #2769F7;
		border-radius: 0rpx 0rpx 140rpx 140rpx;
		padding-top: 104rpx;
		text-align: center;
		font-weight: 600;
		font-size: 40rpx;
		color: #FFFFFF;
		letter-spacing: 4rpx;
		position: relative;

		.return {
			position: absolute;
			left: 32rpx;
			margin-top: 8rpx;
		}

		.selectBox {
			display: flex;
			justify-content: space-between;
			height: 68rpx;
			background: #FFFFFF;
			margin: 32rpx 32rpx 26rpx 32rpx;
			line-height: 68rpx;
			padding: 0 30rpx 0 16rpx;
			border-radius: 10rpx 10rpx 10rpx 10rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #4A4A4A;
		}
		.checkTab{
		  color: #FFFFFF;
		  display: flex;
		  align-items: center;
		  .checkItem{
			 font-weight: bold;
			 display: inline-block;
			 margin-right: 45rpx;
			 font-size: 28rpx;
			 display: flex;
			 flex-direction: column;
			 align-items: center;
		    .selectedBottom{
		     width: 29rpx;
		     height: 4rpx;
		     background: #FFFFFF;
		     border-radius: 5rpx 5rpx 5rpx 5rpx;
		      z-index: 0;
			  margin-top: 4rpx;
		    }
		  }
		  .unchecked{
		    font-weight: 400;
			font-size: 24rpx;
		  }
		}
		.scrollTab{
				 margin: 0 32rpx;	 
		}
	}

	.form_content {
		margin: 0 32rpx;
		padding: 10rpx 28rpx 30rpx 48rpx;
		background: #FFFFFF;
		font-weight: 800;
		font-size: 28rpx;
		color: #4A4A4A;
		border-radius: 10rpx 10rpx 10rpx 10rpx;

		.title {
			padding-bottom: 22rpx;
			display: flex;
			align-items: center;
			margin-top: 18rpx;
            margin-left: -20rpx;
			.icon {
				width: 24rpx;
				height: 24rpx;
				vertical-align: middle;
				margin-right: 6rpx;
			}
        .icon2 {
				width: 19rpx;
				height: 20rpx;
				vertical-align: middle;
				margin-right: 12rpx;
			}
			.line-left {
				width: 8rpx;
				height: 20rpx;
				background: #2769F7;
				border-radius: 6rpx 6rpx 6rpx 6rpx;
				opacity: 0.6;
				margin-right: 12rpx;
			}
		}
		.flexBox{
			display: flex;
			margin-bottom: 14rpx;
			.facilityName{
				width: 45%;
			}
			.wtBox{
				display: flex;
				margin-right: 35rpx;
				margin-bottom: 14rpx;
				text{
					font-weight: 400;
					font-size: 25rpx;
					color: #989898;
					margin-left: 7rpx;
				}
			}
			.default{
				width: 108rpx;
				height: 43rpx;
				border-radius: 5rpx 5rpx 5rpx 5rpx;
				border: 1rpx solid rgba(39, 105, 247, 0.5);
				text-align: center;
				line-height: 43rpx;
				font-weight: bold;
				font-size: 25rpx;
				color: #3C8AFF;
				margin-right: 18rpx;
			}
			.checked{
				background: #2769F7;
				color: #FFFFFF;
			}
		}
		.warning{
			font-weight: bold;
			font-size: 25rpx;
			color: #333333;
			margin-top: 18rpx;
			margin-left: -20rpx;
			.icon{
				width: 24rpx;
				height: 25rpx;
				margin-right: 14rpx;
				vertical-align: middle;
			}
		}
		.workBox{
			margin: 30rpx 13rpx 0rpx -5rpx;
		}
	}

	/deep/ .u-textarea {
		border: 1rpx solid #efefef;
		border-radius: 10rpx;
	}
	/deep/ .u-form-item__body__left__content__label{
		font-size: 28rpx !important
	}
	scroll-view{
		white-space: nowrap;
	}
</style>